import React, { useState } from 'react';
import { Card, Button, Space, Input, Select, Table, Switch, message, Modal, Form, InputNumber } from 'antd';
import { PlusOutlined, ExportOutlined, ImportOutlined, SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import type { TableProps } from 'antd';
import './index.less';

const { Option } = Select;
const { confirm } = Modal;

interface ICDItem {
  id: number;
  code: string;
  name: string;
  remark: string;
  status: boolean;
  sortNo: number;
  mnemonicCode: string;
}

const ICDPage: React.FC = () => {
  const [loading, setLoading] = useState<boolean>(false);
  const [dataSource, setDataSource] = useState<ICDItem[]>([
    { id: 1, code: 'A00.0', name: '霍乱', remark: '肠道传染病', status: true, sortNo: 1, mnemonicCode: 'HL' },
    { id: 2, code: 'A01.0', name: '伤寒', remark: '沙门氏菌感染', status: true, sortNo: 2, mnemonicCode: 'SH' },
    { id: 3, code: 'A15.0', name: '肺结核', remark: '呼吸系统疾病', status: true, sortNo: 3, mnemonicCode: 'FJH' },
    { id: 4, code: 'B20.0', name: '艾滋病', remark: '免疫缺陷病毒感染', status: false, sortNo: 4, mnemonicCode: 'AZB' },
    { id: 5, code: 'C00.0', name: '唇恶性肿瘤', remark: '消化系统恶性肿瘤', status: true, sortNo: 5, mnemonicCode: 'CEXZL' },
    { id: 6, code: 'D50.0', name: '缺铁性贫血', remark: '血液系统疾病', status: true, sortNo: 6, mnemonicCode: 'QTXPX' },
    { id: 7, code: 'E10.0', name: '1型糖尿病', remark: '代谢性疾病', status: true, sortNo: 7, mnemonicCode: 'YXTNB' },
    { id: 8, code: 'F20.0', name: '精神分裂症', remark: '精神类疾病', status: false, sortNo: 8, mnemonicCode: 'JSFLS' },
    { id: 9, code: 'G40.0', name: '癫痫', remark: '神经系统疾病', status: true, sortNo: 9, mnemonicCode: 'DX' },
    { id: 10, code: 'H25.0', name: '老年性白内障', remark: '眼科疾病', status: true, sortNo: 10, mnemonicCode: 'LNXBNZ' },
  ]);
  
  const [form] = Form.useForm();
  
  // 处理状态切换
  const handleStatusChange = (checked: boolean, record: ICDItem) => {
    const newData = [...dataSource];
    const target = newData.find(item => item.id === record.id);
    if (target) {
      target.status = checked;
      setDataSource(newData);
      message.success(`${record.name}已${checked ? '启用' : '禁用'}`);
    }
  };

  // 处理编辑
  const handleEdit = (record: ICDItem) => {
    Modal.info({
      title: '编辑ICD信息',
      content: `您正在编辑：${record.name}`,
      onOk() {
        message.success('编辑成功');
      },
    });
  };

  // 处理删除
  const handleDelete = (record: ICDItem) => {
    confirm({
      title: '确认删除',
      content: `确定要删除ICD编码 ${record.code} - ${record.name} 吗？`,
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        const newData = dataSource.filter(item => item.id !== record.id);
        setDataSource(newData);
        message.success('删除成功');
      },
    });
  };

  // 表格列配置
  const columns: TableProps<ICDItem>['columns'] = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      width: 80,
      align: 'center',
    },
    {
      title: 'ICD诊断编码',
      dataIndex: 'code',
      key: 'code',
      width: 150,
    },
    {
      title: '诊断名称',
      dataIndex: 'name',
      key: 'name',
      width: 180,
    },
    {
      title: '诊断备注',
      dataIndex: 'remark',
      key: 'remark',
      width: 180,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      align: 'center',
      render: (status: boolean, record: ICDItem) => (
        <Switch
          checked={status}
          className="status-switch"
          onChange={(checked) => handleStatusChange(checked, record)}
        />
      ),
    },
    {
      title: '排序号',
      dataIndex: 'sortNo',
      key: 'sortNo',
      width: 100,
      align: 'center',
    },
    {
      title: '助记码',
      dataIndex: 'mnemonicCode',
      key: 'mnemonicCode',
      width: 120,
    },
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: 120,
      align: 'center',
      render: (_, record) => (
        <Space size="middle" className="action-links">
          <a className="action-link" onClick={() => handleEdit(record)}>编辑</a>
          <a className="action-link delete-link" onClick={() => handleDelete(record)}>删除</a>
        </Space>
      ),
    },
  ];

  const handleSearch = () => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      message.success('搜索完成');
    }, 500);
  };

  const handleReset = () => {
    form.resetFields();
  };

  const handleAdd = () => {
    Modal.info({
      title: '新增ICD',
      content: '新增ICD编码表单将在此显示',
      onOk() {
        message.success('添加成功');
      },
    });
  };

  const handleImport = () => {
    Modal.info({
      title: '导入ICD',
      content: '导入功能将在此实现',
      onOk() {
        message.success('导入成功');
      },
    });
  };

  const handleExport = () => {
    message.success('导出成功');
  };

  return (
    <div className="icd-container">
      <Form form={form} layout="inline">
        <div className="search-toolbar">
          <Space size="middle">
            <Form.Item name="code" label="ICD编码">
              <Input placeholder="请输入ICD编码" style={{ width: 180 }} />
            </Form.Item>
            <Form.Item name="name" label="诊断名称">
              <Input placeholder="请输入诊断名称" style={{ width: 180 }} />
            </Form.Item>
            <Form.Item name="status" label="状态">
              <Select placeholder="请选择状态" style={{ width: 120 }} allowClear>
                <Option value="1">启用</Option>
                <Option value="0">禁用</Option>
              </Select>
            </Form.Item>
            <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>
              搜索
            </Button>
            <Button icon={<ReloadOutlined />} onClick={handleReset}>
              重置
            </Button>
          </Space>
          <Space size="middle">
            <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
              新增
            </Button>
            <Button icon={<ImportOutlined />} onClick={handleImport}>
              导入
            </Button>
            <Button icon={<ExportOutlined />} onClick={handleExport}>
              导出
            </Button>
          </Space>
        </div>
      </Form>

      <Table
        className="icd-table"
        columns={columns}
        dataSource={dataSource}
        rowKey="id"
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: total => `共 ${total} 条记录`,
          pageSize: 10,
          total: dataSource.length,
        }}
        loading={loading}
        scroll={{ x: 1100 }}
        rowClassName={(record, index) => index % 2 === 0 ? 'even-row' : 'odd-row'}
      />
    </div>
  );
};

export default ICDPage; 
